<template>
  <a-modal :title="title" :visible="visible" @cancel="handleCancel" :destroyOnClose="true">
    <div style="max-height: 66vh; overflow: auto">
      <a-form-model ref="form" :model="queryParam" :rules="validatorRules">
        <a-form-model-item label="计划编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="planNo">
          <a-input disabled v-model="queryParam.planNo"></a-input>
        </a-form-model-item>
        <a-form-model-item label="计划名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="planName">
          <a-input disabled v-model="queryParam.planName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="计划类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="planType">
          <j-dict-select-tag
            style="width: 100%"
            v-model="queryParam.planType"
            :placeholder="disableSubmit ? '' : '请选择'"
            dict-code="inconplantype"
            :disabled="disableSubmit"
            @change="handleTypeChange"
          />
        </a-form-model-item>
        <a-form-model-item v-if="yearShow" label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year">
          <a-date-picker
            mode="year"
            :placeholder="disableSubmit ? '' : '请选择'"
            format="YYYY"
            value-format="yyyy-MM-dd"
            v-model="queryParam.year"
            :open="yearPickShow"
            style="width: 100%"
            :disabled="disableSubmit"
            @panelChange="handlePanelChange"
            @openChange="handleOpenChange"
          />
        </a-form-model-item>

        <a-form-model-item v-if="monthShow" label="年月" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="date">
          <a-date-picker
            mode="month"
            :placeholder="disableSubmit ? '' : '请选择'"
            format="YYYY-MM"
            value-format="YYYY-MM"
            v-model="queryParam.date"
            :open="monthPickShow"
            style="width: 100%"
            :disabled="disableSubmit"
            @panelChange="handlePanelChange2"
            @openChange="handleOpenChange2"
          />
        </a-form-model-item>

        <a-form-model-item v-if="quarterShow" label="季度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="quarter">
          <j-dict-select-tag
            style="width: 100%"
            :disabled="disableSubmit"
            v-model="queryParam.quarter"
            :placeholder="disableSubmit ? '' : '请选择'"
            dict-code="sys_quarter"
          />
        </a-form-model-item>
        <a-form-model-item
          v-show="!disableSubmit"
          label="年度计划附件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="fileNameList"
        >
          <!-- <NKUpload ref="fileUpload" :fileid="'file'" @uploadFile="handleFileUploaded"></NKUpload> -->
          <RuleUpload ref="fileUpload" :fileid="queryParam.fid" @uploadFile="handleSubmit"></RuleUpload>
        </a-form-model-item>
        <a-form-model-item label="评价范围" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluateRange">
          <a-textarea
            :disabled="disableSubmit"
            :placeholder="disableSubmit ? '' : '请输入'"
            v-model="queryParam.evaluateRange"
          ></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="工作任务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workTask">
          <a-textarea
            :disabled="disableSubmit"
            :placeholder="disableSubmit ? '' : '请输入'"
            v-model="queryParam.workTask"
          ></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="人员组织" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="peopleOrg">
          <a-textarea
            :disabled="disableSubmit"
            :placeholder="disableSubmit ? '' : '请输入'"
            v-model="queryParam.peopleOrg"
          ></a-textarea>
        </a-form-model-item>

        <a-form-model-item label="进度安排" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="schedule">
          <a-textarea
            :disabled="disableSubmit"
            :placeholder="disableSubmit ? '' : '请输入'"
            v-model="queryParam.schedule"
          ></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </div>

    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" v-if="!disableSubmit" @click="saveData(0)">保存</a-button>
      <a-button type="primary" v-if="!disableSubmit" @click="saveData(1)">提交</a-button>
    </template>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
// import NKUpload from './components/NKUpload.vue'
import RuleUpload from '../components/RuleUpload.vue'
export default {
  name: 'createPlan',
  components: { RuleUpload },
  data() {
    return {
      title: '',
      queryParam: {
        planNo: '',
        planName: '',
        planType: '03',
        year: '',
        fileNameList: [],
        fid: '',
        evaluateRange: '',
        workTask: '',
        peopleOrg: '',
        schedule: '',
        approveUser: '',
        date: '',
        quarter: '',
      },
      yearPickShow: false,
      monthPickShow: false,
      visible: false,
      disableSubmit: false,
      quarterShow: false,
      yearShow: true,
      monthShow: false,
      validatorRules: {
        year: [{ required: true, message: '请选择年份!' }],
        quarter: [{ required: true, message: '请选择季度!' }],
        date: [{ required: true, message: '请选择月份!' }],
        planType: [{ required: true, message: '请选择计划类型' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      approverList: '',
      url: {
        getApprover: '/sys/user/queryAuditInfoByOrgCode',
        file: '/incon/inconReviewPlan/queryFileList',
      },
    }
  },
  created() {
    getAction(this.url.getApprover)
      .then((res) => {
        //获取审核人列表
        if (res.success && res.result) {
          this.approverList = res.result
        } else {
          console.log(res)
        }
      })
      .finally(() => {})
  },
  mounted() {},
  methods: {
    saveData(type) {
      this.queryParam.submitFlag = type
      // debugger
      this.$refs.fileUpload.saveFile()
    },
    handleSubmit(id) {
      console.log(id, 'fid')
      // console.log(this.queryParam, 'query')
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.visible = false
          let params = {
            ...this.queryParam,
            fid: id,
          }
          this.$emit('openModelView', params)
        } else {
          return false
        }
      })
    },
    handleCancel(e) {
      this.queryParam = {
        date: '',
        month: '',
        quarter: '',
        year: '',
      }
      this.quarterShow = false
      this.yearShow = true
      this.monthShow = false
      this.visible = false
    },
    moment,
    // 得到年份选择器的值
    handlePanelChange(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearPickShow = false
      this.$refs.form.validateField('year', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange2(status) {
      this.monthPickShow = status
    },
    // 得到年份选择器的值
    handlePanelChange2(value) {
      this.queryParam.date = moment(value)
      this.queryParam.year = moment(value).format('YYYY')
      this.queryParam.month = moment(value).format('MM')
      this.monthPickShow = false
      this.$refs.form.validateField('date', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    edit(record) {
      if (record && '{}' != JSON.stringify(record) && record.id) {
        // debugger
        this.queryParam = JSON.parse(JSON.stringify(record))
        this.handleTypeChange(record.planType, '1')
        if (this.monthShow) {
          const { year, month } = record
          this.queryParam.date = `${year}-${month}`
        }

        this.getFileList(record, 'yearPlan')
      }
      this.visible = true
    },
    async getFileList(record, type) {
      // ${record.status}
      const data = await getAction(`${this.url.file}?planId=${record.id}&fileType=${type}`)
      if (+data.code == 200) {
        this.$refs.fileUpload.setFile(data.result.records)
      }
    },
    handleTypeChange(e, a) {
      if (!a) {
        this.queryParam.quarter = ''
        this.queryParam.date = ''
        this.queryParam.month = ''
        this.queryParam.year = ''
      }

      if (e == '02') {
        this.quarterShow = true
      } else {
        this.quarterShow = false
      }

      if (e != '01') {
        this.yearShow = true
        this.monthShow = false
      } else {
        this.yearShow = false
        this.monthShow = true
      }
    },
  },
}
</script>

<style scoped>
</style>
